iT邦幫忙

0

13.Bootstrap(中文教程)元件:按鈕群組

  • 分享至 

  • xImage
  •  

ㄧ.按鈕群組

<div id="demo" class="component">
 <div class="btn-group">
  <button class="btn btn-secondary">1</button>
  <button class="btn btn-secondary">2</button>
  <button class="btn btn-secondary">3</button>
 </div>
</div>
 

.component.demo{
 padding: 50px;
}

重點:
1.現在出現的為按鈕群組,只要裡面包多個.btn在父元素加入btn-group

二.按鈕群組尺寸

<div id="demo" class="component">
    <div class="btn-group btn-group-sm">
      <button class="btn btn-secondary">1</button>
      <button class="btn btn-secondary">2</button>
      <button class="btn btn-secondary">3</button>
    </div>
</div>
 

.component.demo{
 padding: 50px;
}

重點:
1.包裝上可以用尺寸的類,讓按鈕變小變大也是一樣的尺寸模式.btn-group-sm .btn-group-lg

三.按鈕群組尺寸

<div id="demo" class="component">
    <div class="btn-group-vertical btn-group-sm">
      <button class="btn btn-secondary">1</button>
      <button class="btn btn-secondary">2</button>
      <button class="btn btn-secondary">3</button>
    </div>
</div>

.component.demo{
 padding: 50px;
}

重點:
1.如果要垂直顯示要將原本的btn-group改成btn-group-vertical

codepen
參考:bootstrap4


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言